<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>地址选择器</title>
		<link rel="stylesheet" href="https://txtest.westts.cn//assets/css/frontend.min.css" />
		<link rel="stylesheet" href="https://txtest.westts.cn//assets/libs/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			#container {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}

			.confirm {
				position: absolute;
				bottom: 30px;
				right: 4%;
				z-index: 99;
				height: 50px;
				width: 50px;
				line-height: 50px;
				font-size: 15px;
				text-align: center;
				background-color: white;
				background: #1ABC9C;
				color: white;
				border: none;
				cursor: pointer;
				border-radius: 50%;
			}

			.search {
				position: absolute;
				width: 400px;
				top: 0;
				left: 50%;
				padding: 5px;
				margin-left: -200px;
			}

			label.BMapLabel {
				max-width: inherit;
				padding: .75rem 1.25rem;
				margin-bottom: 1rem;
				background-color: white;
				width: auto;
				min-width: 22rem;
				border: none;
				box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
			}

			.alert {
				position: relative;
				z-index: 10;
				display: none;
				transition: all 1s 0.5 ease-in;
			}
		</style>
	</head>
	<body>
		<div class="alert alert-warning " id="myAlert">
			<a href="#" class="close" data-dismiss="alert">&times;</a>
			<strong>您需要点击选择地图上详细的地址！</strong>
		</div>
		<div class="search">
			<div class="input-group">
				<input type="text" id="place" name="q" class="form-control" placeholder="输入地点" />
				<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
				</div>
				<span class="input-group-btn">
					<button type="button" name="search" id="address" class="btn btn-success">
						<i class="fa ">搜索</i>
					</button>
				</span>
			</div>
		</div>
		<div class="confirm">确定</div>
		<div id="container"></div>
		<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=F51571495f717ff1194de02366bb8da9"></script>
		<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=F51571495f717ff1194de02366bb8da9"></script>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!-- <script type="module">
	import eventBUs from '../../utils/eventBus.js'
	console.log(eventBUs)
</script> -->
		<script type="text/javascript">
			$(function() {
				// 百度地图API功能
				function G(id) {
					return document.getElementById(id);
				}
				// var localcity = new BMapGL.LocalCity();
				// localcity.get(e => {
				// 	console.log(e, '城市定位');
				// })
				var map, marker, searchService, address, lng, lat, address2, classify, district, province, city;
				let $lng = 104.0655
				let $lat = 30.6799
				// var geolocation = new BMapGL.Geolocation();
				// geolocation.getCurrentPosition(function(r) {
				// 	if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				// 		console.log(r.point.lng)
				// 		$lng = r.point.lng + Math.random() * 0.001
				// 		$lat = r.point.lat + Math.random() * 0.001
				// 		$lng = $lng.toFixed(6)
				// 		$lat = $lat.toFixed(6)
				// 		console.log($lng,111)
				// 		init()
				// 	} else { //不同意就默认一个经度、纬度
				// 		$lng = $lng + Math.random() * 0.001
				// 		$lat = $lat + Math.random() * 0.001
				// 		$lng = $lng.toFixed(6)
				// 		$lat = $lat.toFixed(6)
				// 		init()
				// 	}
				// });
				$lng = $lng + Math.random() * 0.001
				$lat = $lat + Math.random() * 0.001
				$lng = $lng.toFixed(6)
				$lat = $lat.toFixed(6)
				
				var init = function() {
					map = new BMap.Map("container"); // 创建地图实例
					var point = new BMap.Point($lng, $lat); // 创建点坐标
					map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
					map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别

					var size = new BMap.Size(10, 20);
					map.addControl(new BMap.CityListControl({
						anchor: BMAP_ANCHOR_TOP_LEFT,
						offset: size,
					}));

					var geoc = new BMap.Geocoder();

					var addpoint = function(point) {
						//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
						var pt = point;
						geoc.getLocation(pt, function(rs) {
							console.log(rs.addressComponents, '详细信息');
							//对象可以获取到详细的地址信息
							//修改
							address2 = rs.addressComponents.province + rs.addressComponents.city + rs
								.addressComponents.district
							address = rs.address;
							district = rs.addressComponents.district
							province = rs.addressComponents.province
							city = rs.addressComponents.city
							console.log(province, 1, city, district)
							deletePoint();
							var mk = new BMap.Marker(pt);
							map.addOverlay(mk);
							map.panTo(pt);
							var label = new BMap.Label('<div class="info">地址:' + address + '<br>经度:' + pt
								.lng + '<br>纬度:' + pt.lat + '</div>', {
									offset: new BMap.Size(16, 20)
								});
							label.setStyle({
								border: 'none',
								padding: '.75rem 1.25rem'
							});
							mk.setLabel(label);
							//将对应的HTML元素设置值
							lng = pt.lng;
							lat = pt.lat;
						});
					};

					if ("{$lng}" != '' && "{$lat}" != '') {
						addpoint(point);
					}

					ac = new BMap.Autocomplete({
						"input": "place",
						"location": map
					}); //建立一个自动完成的对象
					ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
						var str = "";
						var _value = e.fromitem.value;
						var value = "";
						if (e.fromitem.index > -1) {
							value = _value.province + _value.city + _value.district + _value.street + _value
								.business;
						}
						str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

						value = "";
						if (e.toitem.index > -1) {
							_value = e.toitem.value;
							value = _value.province + _value.city + _value.district + _value.street + _value
								.business;
						}
						str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
						G("searchResultPanel").innerHTML = str;
					});
					ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
						var _value = e.item.value;
						console.log('jjjjj', e)
						myValue = _value.province + _value.city + _value.district + _value.street + _value
							.business;
						G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index +
							"<br />myValue = " + myValue;
						setPlace();
					});

					function setPlace() {
						map.clearOverlays(); //清除地图上所有覆盖物
						function myFun() {
							var result = local.getResults().getPoi(0);
							var pp = result.point; //获取第一个智能搜索的结果
							map.centerAndZoom(pp, 18);
							map.addOverlay(new BMap.Marker(pp)); //添加标注
							lng = pp.lng;
							lat = pp.lat;
							address = result.address;
							city = local.ka.city
							address2 = result.address2;
							point = new BMap.Point(lng, lat);
							addpoint(point)
							// console.log(local, 222)
						}

						var local = new BMap.LocalSearch(map, { //智能搜索
							onSearchComplete: myFun
						});
						local.search(myValue);
					}

					map.addEventListener("click", function(e) {
						//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
						var pt = e.point;
						console.log('hhhhh', pt)
						addpoint(e.point);
					});

					/**
					 * 清除覆盖物
					 */
					function deletePoint() {
						var allOverlay = map.getOverlays();
						for (var i = 0; i < allOverlay.length; i++) {
							map.removeOverlay(allOverlay[i]);
						}
					}
				};

				var close = function(data) {
					// console.log(data,1111)
					// eventBUs.$emit('getWeb',data)
					window.sessionStorage.setItem('mapData', JSON.stringify(data));
					window.history.go(-1);
					// var index = parent.Layer.getFrameIndex(window.name);
					// var callback = parent.$("#layui-layer" + index).data("callback");
					// //再执行关闭
					// parent.Layer.close(index);
					// //再调用回传函数
					// if (typeof callback === 'function') {
					//     callback.call(undefined, data);
					// }
				};

				//点击确定后执行回调赋值
				$(document).on('click', '.confirm', function() {
					if (!district || !province || !city) {
						$('#myAlert').css('display', 'block')
						setTimeout(() => {
							$('#myAlert').css('display', 'none')
						}, 1500)
						return
					}
					var zoom = map.getZoom();
					var data = {
						lat: lat,
						lng: lng,
						zoom: zoom,
						address: address,
						address2: address2,
						classify: province + '-' + city + '-' + district
					};
					console.log(data, 'data')
					close(data);
				});

				init();
			});
		</script>
	</body>
</html>